<template>
  <div :id="'echarts-basic-bar-' + id" class="echarts-basic-bar"></div>
</template>

<script>
import { isArray } from "@/utils/public";
import EchartsMixin from "@/views/child/admin/echart/echarts-comps/mixin/echarts-mixin";
export default {
  name: "basicBar",
  mixins: [EchartsMixin],
  props: {
    /** eData 数据结构
     * xName: ''  // x轴 name
     * yName: ''  // y轴 name
     * xData: []  // x轴 label 数据
     * yData: []  // y轴 数据组 { name: '', data: [] }
     */
    id: String,
    eData: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
    xLabelRotate: {
      type: Boolean,
      default: false,
    },
    yLabelRotate: {
      type: Boolean,
      default: false,
    },
    barWidth: {
      type: [Number, String],
      default: "25%",
    },
  },
  computed: {
    curOption() {
      if (!this.eData) return null;
      const { xName, yName, xData, yData } = this.eData;
      if (!isArray(xData) || !isArray(yData)) return null;

      let _serie = {
        name: "",
        data: [],
        type: "bar",
        barWidth: this.barWidth,
        coordinateSystem: "cartesian2d",
      };

      let _tempOption = {
        title: {
          show: this.title ? true : false,
          text: this.title || "",
        },
        legend: {
          // 等于 series name 的集合
          data: [],
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} <br/> {a} : {c}",
        },
        xAxis: {
          name: xName,
          type: "category",
          data: xData,
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: this.xLabelRotate ? 45 : 0,
          },
        },
        yAxis: {
          name: yName,
          type: "value",
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: this.yLabelRotate ? 45 : 0,
          },
        },
        series: [],
      };

      yData.length > 0 &&
        yData.forEach((itemObj) => {
          let newSerie = _.cloneDeep(_serie);
          newSerie.name = itemObj.name || "";
          newSerie.data = itemObj.data || [];
          if (itemObj.name) _tempOption.legend.data.push(itemObj.name);
          _tempOption.series.push(newSerie);
        });
      return _tempOption;
    },
  },
  methods: {
    initEcahrts() {
      this.$nextTick(() => {
        const chartDom = document.getElementById("echarts-basic-bar-" + this.id);
        const myChart = window.echarts.init(chartDom);
        this.curOption && myChart.setOption(this.curOption);
      });
    },
  },
  watch: {
    curOption: {
      deep: true,
      handler() {
        this.initEcahrts();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
// .echarts {
//   width: 100%;
//   height: 400px;
// }

.echarts-basic-bar {
  height: 400px;
  margin: 50px 20px;
  padding: 20px;
  box-shadow: 5px 8px 12px #ebedf0;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.01);
  overflow: auto;
}
</style>
